<template>

  <div>
    <!-- 输入框 -->
    <el-input
        style="width:50%;margin-bottom: 10px"
        placeholder="请根据姓名输入搜索内容"
        v-model="pagination.queryString"
        @change="search"
        clearable>
    </el-input>
    <el-button @click="UserList()" class="dalfBut">查询</el-button>


    <!-- 数据单向绑定  :data表格数据 -->
    <el-table :data="dataList" border>
      <!-- prop属性  与此处数据的属性一致 -->
      <el-table-column prop="name"   label="姓名" width="120" ></el-table-column>
      <el-table-column prop="loginName"  label="昵称" width="120" ></el-table-column>
      <el-table-column prop="age"    label="年龄" width="85" ></el-table-column>
      <el-table-column prop="gender" label="性别" width="85" ></el-table-column>
      <el-table-column prop="birthday" label="生日" width="200" :formatter="formatDate"></el-table-column>
      <el-table-column prop="phonenumber" label="电话" width="200" ></el-table-column>
      <el-table-column prop="address" label="地址" width="200" ></el-table-column>
      <!--<el-table-column label="操作" width="100">
          <template slot-scope="scope">
              <el-button type="primary" size="small" icon="el-icon-edit"   circle @click="update(scope.row.id)" ></el-button>
              <el-button type="danger"  size="small" icon="el-icon-delete" circle @click="del(scope.row.id)" ></el-button>
          </template>
      </el-table-column>-->
    </el-table>

    <!-- 分页  :属性="" 单向数据绑定 -->
    <el-pagination
        class="pagiantion"
        @current-change="UserList"
        :current-page="pagination.currentPage"
        :page-size="pagination.pageSize"
        layout="total, prev, pager, next, jumper"
        :total="pagination.total">
    </el-pagination>


  </div>

</template>

<script>
import date from '../plugins/date.js'

export default {
  name: "MuserView.vue",
  data() {
    return {
      pagination: {       //分页相关模型数据
        currentPage: 1, //当前页码
        pageSize: 4,    //每页显示的记录数
        total: 0,        //总记录数
        queryString: ""//查询条件
      },
      dataList:[]
    }
  },
  //钩子函数，VUE对象初始化完成后自动执行
  created(){
    this.UserList()
  },
  methods: {
    //若没有传递当前页码 ， 默认展示第一页
    UserList(page=1){

      this.pagination.currentPage=page
      console.log(this.pagination.currentPage)
      let param ={
        currentPage: this.pagination.currentPage,
        pageSize: this.pagination.pageSize,
        queryString: this.pagination.queryString
      }
      axios.get('http://localhost:8099/user/findPage',{params:param})
          .then(response=>{  //response.data.data 等价于 Map 有PageInfo&query
            console.log(response)
            this.pagination.total = response.data.total
            this.dataList = response.data.records

          })
          .catch(error=>{
            console.log(error)
          })
    },
    search(){
      this.UserList()
    },
    formatDate(row, column){
      let data = row[column.property]
      if(data == null) {
        return null
      }
      let date = new Date(data);
      var o = {
        "M+" : date.getMonth()+1,                 //月份
        "d+" : date.getDate(),                    //日
        "h+" : date.getHours(),                   //小时
        "m+" : date.getMinutes(),                 //分
        "s+" : date.getSeconds(),                 //秒
        "q+" : Math.floor((date.getMonth()+3)/3), //季度
        "S"  : date.getMilliseconds()             //毫秒
      };
      //var fmt = "yyyy-MM-dd hh:mm:ss";
      var fmt = "yyyy-MM-dd";
      if(/(y+)/.test(fmt)) {
        fmt=fmt.replace(RegExp.$1, (date.getFullYear()+"").substr(4 - RegExp.$1.length));
      }
      for(var k in o) {
        if(new RegExp("("+ k +")").test(fmt)){
          fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));
        }
      }
      return fmt ;
    }
  }
}
</script>

<style scoped>

</style>